<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            border: 0px;
        }

        body {
            font-size: 12px;
            background: url();
            background-size: cover;
        }

        .ord {
            width: 500px;
            height: 400px;
            margin: 50px auto;
        }

        h2 {
            text-align: center;
            margin: 20px auto;
        }

        p {
            margin-top: 20px;
        }

        p span {
            width: 75px;
            display: inline-block;
            text-align: right;
            padding-right: 12px;
        }
    </style>
</head>

<body>
    <div class="ord">
        <form action="#">
            <h2>商品订购票单</h2>
            <p>
                <span>产品名称</span>
                <select class="pro">
                    <option selected>--请选择--</option>
                    <option>小米音箱</option>
                    <option>小米手机</option>
                    <option>小米手环</option>
                    <option>小米扫地机</option>
                    <option>小米耳机</option>
                    <option>小米电视</option>
                </select>
            </p>

            <p>
                <span>订单数量</span>
                <input type="number" min="1" required>(必须填写)
            </p>

            <p>
                <span>付款方式：</span>
                <input type="radio" name="payment" id="online" checked class="radio">
                <label for="online">在线支付</label>
                <input type="radio" name="payment" id="remit" class="radio">
                <label for="remit"> 银行汇款</label>
                <input type="radio" name="payment" id="cash" class="radio">
                <label for="cash">现金支付</label>
                <input type="radio" name="payment" id="check" class="radio">
                <label for="check">支票支付</label>
            </p>

            <p>
                <span>快递选择</span>
                <input type="text" name="express" list="expresslist" required>(必须填写)
                <datalist id="expresslist">
                    <option>顺丰快递</option>
                    <option>圆通快递</option>
                    <option>申通快递</option>
                </datalist>
            </p>

            <p>
                <span>卖家留言:</span>
                <textarea name="conten" cols="50" rows="6" placeholder="给商家留言...."></textarea>
            </p>

            <p>
                <span>您的姓名：</span>
                <input type="text" required pattern="^[\u4e00-\u9fa5]{0,5}">(必须填写)
            </p>

            <p>
                <span>邮寄地址：</span>
                <input type="text" required>(必须填写)
            </p>

            <p>
                <span>手机号码：</span>
                <input type="tel">(必须填写)
            </p>

            <p>
                <span>Email 地址：</span>
                <input type="email" required>(必须填写)
            </p>

            <p id="btn">
                <input type="submit" value="提交">
                <input type="submit" value="重置">
            </p>
        </form>
    </div>
</body>

</html>